<template>
    <view class="box">
		<view class="adverst" v-if="item.isAdverst">
			<u--image :fade="true" duration="450" height="200%" width="98%" mode="widthFix"  :radius="10" :src="item.img[0]" :lazy-load="true" />
		</view>
    	<view class="wf-item-page" v-else-if="(parseInt(item.shop_number) - parseInt(item.hot)) > 0 && item.id">	
    	    <block>
			
				<u--image :fade="true" duration="450" height="100%" width="100%" mode="widthFix"  :radius="10" :src="item.img[0]" :lazy-load="true"  class="item-img"/>
				<view class="item-content" v-if="!item.isAdverst">
					<view class="title">
						{{item.introduce}}
					</view>
					<view class="price">
						<view class="left">
							￥<text class="p">{{parseInt(item.price) | relative}}</text>
						</view>
						<view class="right">
							已销{{item.hot}}
						</view>
					</view>
					<view class="item-info">
					    <u-image width="25" shape="circle" height="25" radius="20" :src="item.avatar"  class="info-avatar"/>
					    <view class="info-nickname">{{ item.pb_accounts }}</view>
					</view>
				</view>
			</block>
			
			
    	</view>
		
    </view>
</template>

<script>
export default {
    props: {
        item: {
            type: Object,
            require: true
        }
    },
	filters: {
		relative (val) {
			return val.toFixed(2)
		}
	}
}
</script>

<style lang="scss" scoped>
	.adverst {
		margin-bottom: 10px;
	}
	.item-content {
		padding: 6px 5px;
	}
.title {
	margin-left: 5px;
		font-size: 16px;
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;	
		text-overflow: ellipsis;
	}
	.info-nickname {
		white-space: nowrap;
		overflow: hidden;	
		text-overflow: ellipsis;
	}
.price {
	display: flex;
	align-items: center;
	justify-content: space-between;
	.left {
		color: #fe4543;
	}
	.right {
		font-size: 12px;
		color: #C4C6C9;
	}
	.p {
		font-size: 22px;
		font-size: bold;
	}
}
.wf-item-page {
    background: #fff;
    overflow: hidden;
	padding: 5px;
	width: 95%;
}

.item-img {
    width: 95%;
	border-radius: 10px;
}
.item-img2 {
	margin-bottom: 10px;
}

.item-info {
    display: flex;
    align-items: center;
    padding: 5px;
}

.info-avatar {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin-right: 5px;
}

.info-nickname {
    font-size: 12px;
    color: #333;
}
</style>
